import {
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  createFileRoute,
  notFound,
  useLoaderData,
} from "@tanstack/react-router";
import { Card } from "antd";
import axios from "axios";
import { LazyLoadImage } from "react-lazy-load-image-component";

export const Route = createFileRoute("/front/article/$id")({
  component: RouteComponent,
  loader: async ({ params }) => {
    try {
      const article = (
        await axios.get(`http://localhost:3000/article/${params.id}`)
      ).data;
      return { article };
    } catch (error) {
      throw notFound({ routeId: "/front" });
    }
  },
});

function RouteComponent() {
  const { article } = useLoaderData({ from: Route.fullPath });
  //   const { id } = Route.useParams();
  //   const { isPending, isError, error, data: article } = useGetArticleDetail(id);
  //   if (isPending) return <Loading />;
  //   if (isError) return <Error error={error} />;
  return (
    <Card className="container">
      <CardHeader>
        <CardTitle>
          <h1 className="text-4xl">{article.title}</h1>
        </CardTitle>
        <CardDescription className="mt-6">
          <LazyLoadImage src={article.preview} />
        </CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground">
        <p>{article.content}</p>
      </CardContent>
    </Card>
  );
}
